<!--
  Generated template for the ShoppingCartPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <employee-header [showCate]="true"></employee-header>
</ion-header>
<ion-content>
  <ion-grid color="grid" no-padding padding-top *ngIf="hasDish;else emptyCarts">
    <ion-row color="row" class="carts-list" padding *ngFor="let c of carts">
      <ion-col col-3>
        {{c.Dish_Abbreviation}}
      </ion-col>
      <ion-col col-8 class="name">
        {{c.Dish_Name}}
      </ion-col>
      <ion-col col-13>
        <spinner-total [price]="c.Price" [num]="c.Number_of_Orders"
                       [total]="c.Price * c.Number_of_Orders"
                       (onNumChanged)="onNumChanged($event,c)"></spinner-total>
      </ion-col>
    </ion-row>
    <ion-row color="row" padding *ngIf="carts">
      <ion-col>
        <button ion-button (click)="clear()" outline block>Clear</button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-24>
        <ion-item no-lines>
          <ion-label>Store_ID</ion-label>
          <ion-select [(ngModel)]="storeID" [selectOptions]="storeOptions" (ionChange)="changeStoreId($event)"
                      disabled="true">
            <ion-option value="" selected>All</ion-option>
            <ion-option *ngFor="let s of stores">{{s.Store_ID}}</ion-option>
          </ion-select>
        </ion-item>
      </ion-col>
      <ion-col col-24>
        <ion-item no-lines>
          <ion-label>Table_ID</ion-label>
          <ion-select [(ngModel)]="tableID" [selectOptions]="tableOptions" (ionChange)="changeTableId($event)">
            <ion-option value="" selected>All</ion-option>
            <ion-option *ngFor="let t of tables">{{t}}</ion-option>
          </ion-select>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-24>
        <ion-item>
          <ion-label fixed>Customer_ID</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col col-24>
        <ion-item>
          <ion-label fixed>VIP_Code</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-grid color="grid" no-padding *ngIf="hasDish">
    <ion-row color="row" margin-top no-lines padding>
      <ion-col col-10>
        <ion-buttons>
          <button ion-button (click)="setHome()" outline block margin-bottom>Order More</button>
          <button ion-button (click)="confirm()" block>Confirm Order</button>
        </ion-buttons>
        <p class="warning item-text-wrap">
          <ion-icon ios="ios-warning" md="md-warning"></ion-icon>
          Warning!<br>
          If an order <br>
          is confirmed,<br>
          it cannot be <br>
          undone!
        </p>
      </ion-col>
      <ion-col col-14>
        <ion-list>
          <ion-item>
            <ion-label>Subtotal:</ion-label>
            <ion-label text-right style="margin-right: 0" color="price">
              {{subTotal|currency:'USD':true}}
            </ion-label>
          </ion-item>
          <ion-item>
            <ion-label>
              Tax:
            </ion-label>

            <ion-label text-right>{{Tax |currency:'USD':true}}</ion-label>
            <!--<ion-label item-end text-right>%</ion-label>-->
          </ion-item>
          <ion-item>
            <ion-label>Bill:</ion-label>
            <ion-label text-right>{{Total}}</ion-label>
          </ion-item>
          <ion-item>
            <ion-label>Tips:</ion-label>
            <ion-input type="number" text-right [(ngModel)]="Tips" placeholder="0"
                       (change)="calcTotal()"></ion-input>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ng-template #emptyCarts>
    <div text-center class="no_dishes">No dishes in cart!</div>
  </ng-template>
</ion-content>
